<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        .godInfo {
            background: #FFF;
            padding: 0.75rem 0.75rem 0.1rem 0.75rem;
        }

        .priceInfo {
            padding: 0.25rem 0;
            font-size: 0.6rem;
            color: #adadad;
        }

        .priceInfo .price {
            margin: 0 0.5rem 0 0.25rem;
            font-size: 0.8rem;
        }

        .coupon {
            position: relative;
        }

        .couponInfo {
            position: absolute;
            left: 0;
            top: 0;
            width: 70%;
            height: 100%;
            color: #FFF;
        }

        .couponInfo .couponNum {
            font-size: 0.7rem;
            margin-bottom: 0.1rem;
        }

        .couponInfo .couponNum span {
            margin: 0 0.15rem;
            font-size: 1.5rem;
            line-height: 1;
        }

        .couponInfo .couponDate {
            font-size: 0.5rem;
        }

        .productDetail {
            background: #FFF;
            padding-bottom: 0.5rem;
        }

        .productDetail .ttl {
            font-size: 0.6rem;
            padding: 0.75rem;
        }

        .bytag {
            margin-right: 0.2rem;
            display: inline-block;
            /* color: #FFF; */
            color: #FA7D83;
            border-radius: 0.1rem;
            font-size: 0.6rem;
            padding: 0 0.15rem;
            line-height: 0.6rem;
            vertical-align: middle;
        }
    </style>
</head>

<body class="fadePage">
    <div id="data_html"></div>
    <script type="text/x-dot-template" id="data_tpl">
        <div class="swiper-container mainImg">
            <div class="swiper-wrapper">
				{{ if(it.goods_photos){ }}
				{{ for(var i in it.goods_photos) { }}
				<div class="swiper-slide"><img src="{{= it.goods_photos[i] }}" width="100%" alt=""></div>
				{{ } }}
				{{ }else{ }}
				<div class="swiper-slide"><img src="{{= it.goods_cover || '' }}" width="100%" alt=""></div>
				{{ } }}
            </div>
        </div>
        <div class="godInfo">
            <div class="godTitle">
				{{ if( parseInt(it.goods_shipping_price) == 0 ){ }}
				<span class="bytag">包邮</span>
				{{ } }}
				{{= it.goods_name || '' }}
			</div>
            <div class="priceInfo aui-flex-col aui-flex-middle font-helvet">
                <div class="color-red price">{{= it.goods_sale_price || '0' }}积分</div>
                <div>¥<del>{{= it.goods_market_price || '0' }}</del></div>
                <div class="flex-auto aui-font-size-10 aui-text-center">月销量 {{= it.goods_month_sales || '0' }}件</div>
                <div class="aui-font-size-10">库存 {{= getStock() }}件</div>
            </div>
        </div>
        <div style="height:0.5rem;background-color:#f5f5f5;"></div>
        <div class="productDetail">
			<div class="ttl">商品详情</div>
			<div class="htmlDetail aui-px-10">{{= HTMLDecode(it.goods_content) }}</div>
        </div>
    </script>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript">
    var topSwiper;
    var GOD_ID;
	var GOD_INFO;
	var STOCK;
    apiready = function() {
		api.parseTapmode();
		GOD_ID = api.pageParam.godId;
        getData();
    };

    function getData() {
        showProgress();
        api.ajax({
            url: BASE_URL + 'App/Mall/goodsDetail',
            method: 'post',
            data: {
                values: {
                    goodsId: GOD_ID
                }
            }
        }, function(ret, err) {
            hideProgress();
            if (ret && ret.code == 1) {
                GOD_INFO = ret.data;
                setWinTitle();
                var tpl = $$('#data_tpl').html();
                var tempFn = doT.template(tpl);
                $$('#data_html').html(tempFn(ret.data));
                api.parseTapmode();
                //图片切换
                sliderInit();
                setTimeout(function() {
                    $$('.fadePage').addClass('show');
                }, 300);
            } else {

            }
        });
    }

    function sliderInit() {
        topSwiper = new Swiper('.mainImg', {
            speed: 600,
            autoplay: false
        });
	}
	//计算总库存
	function getStock(){
		STOCK = 0;
		for(var i=0;i<GOD_INFO.priceData.length;i++){
			STOCK += parseInt(GOD_INFO.priceData[i].gp_stock);
		}
		return STOCK;
    }
    //打开详情弹窗
    function openDetailMask(){
        api.openFrame({
            name: 'mask_ucion_detail',
            url: 'mask_ucion_detail.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            bounces: false,
            pageParam: {
                wname: api.winName,
                fname: api.frameName,
                godInfo: GOD_INFO
            },
            animation: {
                type: 'fade',
                duration: 300
            }
        })
    }

    function share(type){
        var shareUrl = 'http://taoke.maiyatang.info/wx/wxhtml/giftBag/gift_detail.html?godId=' + GOD_ID;
        var wx = api.require('wx');
        wx.shareWebpage({
            apiKey: '',
            scene: type,
            title: '有蜜VIP招募',
            description: '',
            thumb: 'widget://image/common/applogo.png',
            contentUrl: shareUrl
        }, function(ret, err) {
            if (ret.status){
                toast('分享成功');
            } else {
                toast('分享失败');
            }
        });
    }

    function setWinTitle(){
        api.execScript({
            script:'setTitle('+ GOD_INFO.goods_type +');'
        });
    }
</script>

</html>
